@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .services-inner-box h2 {
        left: 100px;
    }

    .services-inner-box {
        padding: 5px;
    }

    .services-inner-box h2 {
        top: 20px;
        font-size: 18px;
    }

    .services-inner-box p {
        bottom: -5px;
    }

    .home-bottom div {
        font-size: 30px;
    }

    .heading h1 {
        font-size: 25px;
    }

    .home-bottom {
        height: 90px;
    }

    .home-bottom div {
        line-height: 90px;
    }

    .about-img {
        width: 90%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .services-inner-box h2 {
        left: 95px;
    }

    .navbar-dark .navbar-brand {
        width: 120px;
    }

    .navbar-dark .navbar-nav .nav-link::after {
        display: none;
    }

    .navbar-dark .navbar-toggler {
        color: #333;
        border-color: #333;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    .navbar-dark.body_dark .navbar-toggler {
        color: #ddd;
        border-color: #ddd;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    #about .message-box h3, .section-title h3 {
        font-size: 28px;
        margin: 0 0 15px;
    }

    #about img {
        margin-top: 53px;
    }

    .section-title p {
        font-size: 14px;
    }

    .filter-button-group button {
        padding: 5px 10px;
        margin: 3px 0;
    }

    .filter-button-group {
        text-align: center !important;
        margin: 0;
    }

    .post-box {
        margin-bottom: 30px;
    }

    .footer-distributed .footer-left {
        text-align: center;
    }

    .toggle {
        margin: 0 !important;
    }

    .heading h1 {
        font-size: 25px;
        letter-spacing: .15em;
    }

    .heading p {
        font-size: 14px;
    }

    .section {
        padding: 100px 0 53px;
    }

    .section-title {
        margin-bottom: 20px;
    }

    .post-box .date {
        padding: 5px 10px;
    }

    body::after {
        background-size: auto 100%;
    }

    .navbar {
        padding: .5rem 1rem;
    }

    #mainNav .navbar-collapse {
        padding: 0;
    }

    #git {
        padding-bottom: 20px;
    }

    #git .section-title, #contact .section-title {
        margin-bottom: 30px;
    }

    .home-bottom {
        padding: 10px;
        margin: 0;
    }

    .home-bottom div {
        line-height: 80px;
        font-size: 25px;
    }

    .navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .navbar-dark .navbar-nav .nav-item.active {
        border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
    }

    .heading .h1-top {
        margin-top: 100px;
    }

    .about-img {
        width: 100%;
    }

    .footer-right {
        float: left !important;
    }

    .copyrights {
        padding: 25px 0 0 !important;
    }

    .services-inner-box {
        padding: 0;
        margin: 20px 0 0;
    }

    .ser-icon i {
        display: none;
    }

    .services-inner-box h2 {
        top: 20px;
        left: 20px;
        font-size: 16px;
    }

    .services-inner-box p {
        margin-bottom: 0.7rem;
    }

    .footer-distributed {
        margin: 10px 0;
    }

    .footer-links a, .footer-links span {
        font-size: 12px;
    }

    #contact {
        padding: 20px 0 60px;
    }

    .body-login {
        margin: 220px auto;
    }

    .services-inner-box:hover, #sendMessageButton:hover, .body-login.contact_form button:hover, .home-bottom div:hover {
        -webkit-box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem white;
        box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem white;
    }

    .services-inner-box.body_dark:hover, #contact.body_dark #sendMessageButton:hover, body.body_dark .btn-default:hover, #home.body_dark .home-bottom div:hover {
        -webkit-box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyDark), inset -0.2rem -0.2rem 0.5rem var(--primary-dark-2);
        box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyDark), inset -0.2rem -0.2rem 0.5rem var(--primary-dark-2);
    }

    .note-menu, .api-menu {
        margin-bottom: 15px;
    }

    .note-single, .api-single {
        margin: 12px 0 18px;
    }

    body {
        background-size: auto 100%;
    }

    #home.body_dark .home-bottom div {
        box-shadow: 0.6rem 0.6rem 1.0rem var(--greyDark), -0.2rem -0.2rem 0.8rem var(--primary-dark);
    }

    .clock {
        top: 4rem;
    }
}

@media (max-width: 767px) {
    .navbar-dark .navbar-brand {
        width: 120px;
    }

    .navbar-dark .navbar-nav .nav-link::after {
        display: none;
    }

    .navbar-dark .navbar-toggler {
        color: #333;
        border-color: #333;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    .navbar-dark.body_dark .navbar-toggler {
        color: #ddd;
        border-color: #ddd;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    #about .message-box h3, .section-title h3 {
        font-size: 28px;
        margin: 0 0 15px;
    }

    #about img {
        margin-top: 20px;
    }

    .section-title p {
        font-size: 14px;
    }

    .filter-button-group button {
        padding: 5px 10px;
        margin: 3px 0;
    }

    .filter-button-group {
        text-align: center !important;
        margin: 0;
    }

    .post-box {
        margin-bottom: 30px;
    }

    .footer-distributed .footer-left {
        text-align: center;
    }

    .toggle {
        margin: 0 !important;
    }

    .heading h1 {
        font-size: 25px;
        letter-spacing: .15em;
    }

    .heading p {
        font-size: 14px;
    }

    .section {
        padding: 100px 0 53px;
    }

    .section-title {
        margin-bottom: 20px;
    }

    .post-box .date {
        padding: 5px 10px;
    }

    body::after {
        background-size: auto 100%;
    }

    .navbar {
        padding: .5rem 1rem;
    }

    #mainNav .navbar-collapse {
        padding: 0;
    }

    #git {
        padding-bottom: 20px;
    }

    #git .section-title, #contact .section-title {
        margin-bottom: 30px;
    }

    .home-bottom {
        padding: 10px;
        margin: 0;
    }

    .home-bottom div {
        line-height: 80px;
        font-size: 25px;
    }

    .navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .navbar-dark .navbar-nav .nav-item.active {
        border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
    }

    .heading .h1-top {
        margin-top: 110px;
    }

    .about-img {
        width: 100%;
    }

    .footer-right {
        float: left !important;
    }

    .copyrights {
        padding: 25px 0 0 !important;
    }

    .services-inner-box {
        padding: 0;
        margin: 20px 0 0;
    }

    .services-inner-box h2 {
        top: 20px;
        left: 100px;
    }

    .services-inner-box p {
        margin-bottom: 0.7rem;
    }

    .footer-distributed {
        margin: 10px 0;
    }

    .footer-links a, .footer-links span {
        font-size: 12px;
    }

    #contact {
        padding: 20px 0 60px;
    }

    .body-login {
        margin: 220px auto;
    }

    .services-inner-box:hover, #sendMessageButton:hover, .body-login.contact_form button:hover, .home-bottom div:hover {
        -webkit-box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem white;
        box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem white;
    }

    .services-inner-box.body_dark:hover, #contact.body_dark #sendMessageButton:hover, body.body_dark .btn-default:hover, #home.body_dark .home-bottom div:hover {
        -webkit-box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyDark), inset -0.2rem -0.2rem 0.5rem var(--primary-dark-2);
        box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyDark), inset -0.2rem -0.2rem 0.5rem var(--primary-dark-2);
    }

    .note-menu, .api-menu {
        margin-bottom: 15px;
    }

    .note-single, .api-single {
        margin: 12px 0 18px;
    }

    body {
        background-size: auto 100%;
    }

    #home.body_dark .home-bottom div {
        box-shadow: 0.6rem 0.6rem 1.0rem var(--greyDark), -0.2rem -0.2rem 0.8rem var(--primary-dark);
    }

    .clock {
        top: 5rem;
    }
}

@media only screen and (min-width: 280px) and (max-width: 599px) {
    .navbar-dark .navbar-brand {
        width: 120px;
    }

    .navbar-dark .navbar-nav .nav-link::after {
        display: none;
    }

    .navbar-dark .navbar-toggler {
        color: #333;
        border-color: #333;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    .navbar-dark.body_dark .navbar-toggler {
        color: #ddd;
        border-color: #ddd;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    #about .message-box h3, .section-title h3 {
        font-size: 28px;
        margin: 0 0 15px;
    }

    #about img {
        margin-top: 20px;
    }

    .section-title p {
        font-size: 14px;
    }

    .filter-button-group button {
        padding: 5px 10px;
        margin: 3px 0;
    }

    .filter-button-group {
        text-align: center !important;
        margin: 0;
    }

    .post-box {
        margin-bottom: 30px;
    }

    .footer-distributed .footer-left {
        text-align: center;
    }

    .toggle {
        margin: 0 !important;
    }

    .heading h1 {
        font-size: 25px;
        letter-spacing: .15em;
    }

    .heading p {
        font-size: 14px;
    }

    .section {
        padding: 100px 0 45px;
    }

    .section-title {
        margin-bottom: 20px;
    }

    .post-box .date {
        padding: 5px 10px;
    }

    body::after {
        background-size: auto 100%;
    }

    .navbar {
        padding: .5rem 1rem;
    }

    #mainNav .navbar-collapse {
        padding: 0;
    }

    #git {
        padding-bottom: 20px;
    }

    #git .section-title, #contact .section-title {
        margin-bottom: 30px;
    }

    .home-bottom {
        height: 70px;
        padding: 10px;
        margin: 0;
    }

    .home-bottom div {
        line-height: 50px;
        font-size: 22px;
    }

    .navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .navbar-dark .navbar-nav .nav-item.active {
        border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
    }

    .heading .h1-top {
        margin-top: 110px;
    }

    .about-img {
        width: 100%;
    }

    .footer-right {
        float: left !important;
    }

    .copyrights {
        padding: 0 !important;
    }

    .services-inner-box {
        padding: 0;
        margin: 20px 0 0;
    }

    .services-inner-box h2 {
        top: 20px;
        left: 100px;
    }

    .services-inner-box p {
        margin-bottom: 0.7rem;
    }

    .footer-distributed {
        margin: 10px 0;
    }

    .footer-links a, .footer-links span {
        font-size: 12px;
    }

    #contact {
        padding: 20px 0 60px;
    }

    .body-login {
        margin: 200px auto;
    }

    .services-inner-box:hover, #sendMessageButton:hover, .body-login.contact_form button:hover, .home-bottom div:hover {
        -webkit-box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem white;
        box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem white;
    }

    .services-inner-box.body_dark:hover, #contact.body_dark #sendMessageButton:hover, body.body_dark .btn-default:hover, #home.body_dark .home-bottom div:hover {
        -webkit-box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyDark), inset -0.2rem -0.2rem 0.5rem var(--primary-dark-2);
        box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyDark), inset -0.2rem -0.2rem 0.5rem var(--primary-dark-2);
    }

    .note-menu, .api-menu {
        margin-bottom: 15px;
    }

    .note-single, .api-single {
        margin: 12px 0 18px;
    }

    body {
        background-size: auto 100%;
    }

    #home.body_dark .home-bottom div {
        box-shadow: 0.6rem 0.6rem 1.0rem var(--greyDark), -0.2rem -0.2rem 0.8rem var(--primary-dark);
    }
}